<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        line,
        polyline {
            stroke-dasharray: 1000;
            animation: dash 3s linear 1;
        }
        
        @keyframes dash {
            from {
                stroke-dashoffset: 1000;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
        
        path {
            stroke-dasharray: 215;
            animation: path-dash 1s linear 1;
        }
        
        @keyframes path-dash {
            from {
                stroke-dashoffset: 215;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>


<body>
    <h1>Demo01:Stroke描边</h1>
    <h2>Stroke（描边）设置元素的轮廓样式</h2>
    <p>stroke相关属性可以直接放在元素的属性上，也可以放到style下</p>
    <ul>
        <li>stroke:颜色（none, currentColor， [color]）</li>
        <li>stroke-width:宽度</li>
        <li>stroke-linecap:开放路径的终结（butt无 | round圆角 | square直角 | inherit）</li>
        <li>stroke-linejoin:描边转角表现（miter | round | bevel | inherit）</li>
        <li>stroke-dasharray:虚线描边（none, [dasharray], inherit）</li>
        <li>stroke-miterlimit:描边相交（锐角）的表现方式，默认大小是4</li>
        <li>stroke-dashoffset:虚线的起始偏移（[percentage], [length], inherit）</li>
        <li>stroke-opacity:透明度，默认是1</li>
    </ul>

    <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="40" x2="120" y1="20" y2="20" fill="red" stroke="black" stroke-width="20" stroke-linecap="butt"/>
        <line x1="40" x2="120" y1="60" y2="60" fill="red" stroke="black" stroke-width="20" stroke-linecap="square"/>
        <line x1="40" x2="120" y1="100" y2="100" fill="red" stroke="black" stroke-width="20" stroke-linecap="round"/>
    </svg>

    <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline stroke-opacity="0.3" points="40 60 80 20 120 60" stroke="black" stroke-width="20" fill="none" stroke-linejoin="miter"/>
        <polyline stroke-opacity="0.5" points="40 140 80 100 120 140" stroke="black" stroke-width="20" fill="none" stroke-linejoin="round"/>
        <polyline stroke-opacity="0.8" points="40 220 80 180 120 220" stroke="black" stroke-width="20" fill="none" stroke-linejoin="bevel"/>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="4">
            <path stroke-dasharray="5,5" d="M5 20 l215 0" />
            <path stroke-dasharray="10,10" d="M5 40 l215 0" />
            <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
        </g>
    </svg>

    <svg width="400" height="300" viewBox="0 0 1024 1024">
        <g transform="matrix(1 0 0 -1 0 820)">
            <path fill="currentColor" d="M420 736h284l-4 -40h-280v40zM316 584q-24 44 -92 204v4l148 -140l-32 -112zM248 376l-64 176l4 4l132 -140l-48 -104zM276 -104l-104 288l8 4l176 -236l-56 -120zM420 568l-128 -580l-40 40l156 540h12zM538 136q-30 68 -48 182t-22 398h12q16 -184 26 -248t30 -144 t50 -134t78 -102t168 -120q-28 -56 -36 -128q-128 96 -178 162l-50 66zM388 -160h-28q128 100 188 188t78 152t24 104t10 154t4 338h80q0 -396 -14 -486t-42 -152t-98 -138l-70 -76z"/>
        </g>
    </svg>

    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
    </svg>
</body>

</html>

</html>